<template>
    <div class="app-container">
        <!-- 搜索/过滤区域 -->
        <div class="search-container">
            <el-form :inline="true" :model="searchForm" size="small" class="search-form">
                <el-form-item label="名称">
                    <el-input v-model="searchForm.name" placeholder="请输入" clearable style="width: 150px;" />
                </el-form-item>
                <!-- <el-form-item label="工号">
          <el-input v-model="searchForm.employeeId" placeholder="请输入" clearable style="width: 150px;" />
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="searchForm.phone" placeholder="请输入" clearable style="width: 150px;" />
        </el-form-item>
        <el-form-item label="问卷">
          <el-select v-model="searchForm.tag" placeholder="请选择" clearable style="width: 150px;">
            <el-option v-for="tag in nurseTagOptions" :key="tag.value" :label="tag.label" :value="tag.value" />
          </el-select>
        </el-form-item> -->
                <el-form-item>
                    <el-button type="primary" @click="handleSearch">查询</el-button>
                    <el-button @click="handleReset">重置</el-button>
                </el-form-item>
            </el-form>
        </div>

        <!-- 操作按钮区域 -->
        <div class="operation-container">
            <el-button type="primary" @click="handleAdd">新增问卷</el-button>
        </div>

        <!-- 数据表格 -->
        <el-table :data="tableData" v-loading="loading" style="width: 100%; margin-bottom: 20px;" border stripe>
            <el-table-column prop="name" label="名称" width="120" />
            <el-table-column prop="code" label="编码" width="120" />
            <el-table-column prop="startDate" label="开始时间" width="120" />
            <el-table-column prop="endDate" label="结束时间" width="120" />
            <el-table-column prop="describe" label="描述" >
               
            </el-table-column>
            <el-table-column prop="status" label="状态" width="100" align="center">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.status" :active-value="'1'" :inactive-value="'0'"
                        active-color="#13ce66" inactive-color="#ff4949" @change="handleStatusChange(scope.row)" />
                </template>
            </el-table-column>
            <el-table-column label="操作" width="200" align="center" fixed="right">
                <template slot-scope="scope">
                    <el-button type="text" @click="handleEdit(scope.row)" class="operation-text">编辑</el-button>
                    <el-button type="text" @click="handleDelete(scope.row)" style="color: #F56C6C;"
                        class="operation-text">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页组件 -->
        <div class="pagination-container">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="pagination.currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pagination.pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="pagination.total" background />
        </div>

        <!-- 新增/编辑护士对话框 -->
        <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="600px" :before-close="handleDialogClose">
            <el-form :model="nurseForm" :rules="rules" ref="nurseForm" label-width="100px">
                <el-form-item label="名称" prop="name">
                    <el-input v-model="nurseForm.name" placeholder="请输入名称" />
                </el-form-item>
                <el-form-item label="编码" prop="employeeId">
                    <el-input v-model="nurseForm.parentName" placeholder="请选编码" />
                </el-form-item>
                <el-form-item label="开始时间" prop="phone">
                    <el-input v-model="nurseForm.code" placeholder="请输入开始时间" />
                </el-form-item>
                <el-form-item label="结束时间" prop="money">
                    <el-input v-model="nurseForm.money" placeholder="请输入结束时间" />
                </el-form-item>
                <el-form-item label="描述" prop="tags">
                    <el-input v-model="nurseForm.money" placeholder="请输入描述" />
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="handleDialogClose">取消</el-button>
                <el-button type="primary" @click="handleSubmit" :loading="submitLoading">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>

export default {
    data() {
        return {
            // 搜索表单
            searchForm: {
                name: '',
                employeeId: '',
                phone: '',
                tag: '',
                boundUser: ''
            },
            // 表格数据
            tableData: [
                {
                    name: '护理是否专业',
                    code: 'a1',
                    startDate: '2025-07-07',
                    endDate: '2025-08-07',
                    describe: '静脉采血知情同意书',
                    campusCode: "02",
                    campusName: "*郫都区中医医院(新院区)"
                },
                {
                    name: '护理有没有冒犯',
                    code: 'a2',
                    startDate: '2025-07-07',
                    endDate: '2025-08-07',
                    describe: '静脉采血知情同意书',
                    campusCode: "02",
                    campusName: "*郫都区中医医院(新院区)"
                },
                {
                   name: '护理是否拖沓',
                    code: 'a3',
                    startDate: '2025-07-07',
                    endDate: '2025-08-07',
                    describe: '静脉采血知情同意书',
                    campusCode: "02",
                    campusName: "*郫都区中医医院(新院区)"
                },
                {
                    name: '是否有专人陪同',
                    code: 'a4',
                    startDate: '2025-07-07',
                    endDate: '2025-08-07',
                    describe: '静脉采血知情同意书',
                    campusCode: "02",
                    campusName: "*郫都区中医医院(新院区)"
                },
                {
                    name: '护理中是否有多加收费情况',
                    code: 'a5',
                    startDate: '2025-07-07',
                    endDate: '2025-08-07',
                    describe: '静脉采血知情同意书',
                    campusCode: "02",
                    campusName: "*郫都区中医医院(新院区)"
                },
                {
                    name: '是否明明白白消费',
                    code: 'a6',
                    startDate: '2025-07-07',
                    endDate: '2025-08-07',
                    describe: '静脉采血知情同意书',
                    campusCode: "02",
                    campusName: "*郫都区中医医院(新院区)"
                },
            ],
            // 加载状态
            loading: false,
            // 分页信息
            pagination: {
                currentPage: 1,
                pageSize: 10,
                total: 3
            },
            // 对话框相关
            dialogVisible: false,
            viewDialogVisible: false,
            viewDialogVisibleAgree: false,
            dialogTitle: '新增问卷',
            submitLoading: false,
            // 护士表单
            nurseForm: {
                id: null,
                name: '',
                employeeId: '',
                phone: '',
                tags: [],
                boundUser: '',
                remark: ''
            },
            // 当前查看的护士
            currentNurse: {},
     
            // 表单验证规则
            rules: {
                name: [
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
                ],
                employeeId: [
                    { required: true, message: '请输入工号', trigger: 'blur' },
                    { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
                ],
                phone: [
                    { required: true, message: '请输入手机号码', trigger: 'blur' },
                    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
                ],
                tags: [
                    { required: true, message: '请选择问卷', trigger: 'change' }
                ]
            }
        }
    },
    methods: {
        // 搜索
        handleSearch() {
            this.pagination.currentPage = 1
            this.loadData()
        },
        // 重置搜索
        handleReset() {
            this.searchForm = {
                name: '',
                employeeId: '',
                phone: '',
                tag: '',
                boundUser: ''
            }
            this.handleSearch()
        },
        // 新增护士
        handleAdd() {
            this.dialogTitle = '新增问卷'
            this.nurseForm = {
                id: null,
                name: '',
                employeeId: '',
                phone: '',
                tags: [],
                boundUser: '',
                remark: ''
            }
            this.dialogVisible = true
        },
        // 查看护士
        handleView(row) {
            this.currentNurse = { ...row }
            this.viewDialogVisible = true
        },
        handleViewAgree(row) {
            this.currentNurse = { ...row }
            this.viewDialogVisibleAgree = true
        },
        // 编辑护士
        handleEdit(row) {
            this.dialogTitle = '编辑问卷'
            this.nurseForm = { ...row }
            this.dialogVisible = true
        },
        // 删除护士
        handleDelete(row) {
            this.$confirm(`确定要删除问卷"${row.name}"吗？`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // deleteNurse(row.id).then(() => {
                //   this.$message.success('删除成功')
                //   this.loadData()
                // }).catch(() => {
                //   this.$message.error('删除失败')
                // })
            }).catch(() => {
                // 取消删除
            })
        },
        // 提交表单
        handleSubmit() {
            this.$refs.nurseForm.validate((valid) => {
                if (valid) {
                    this.submitLoading = true

                    if (this.nurseForm.id) {
                        // 编辑
                        // updateNurse(this.nurseForm.id, this.nurseForm).then(() => {
                        //   this.$message.success('编辑成功')
                        //   this.submitLoading = false
                        //   this.dialogVisible = false
                        //   this.loadData()
                        // }).catch(() => {
                        //   this.submitLoading = false
                        //   this.$message.error('编辑失败')
                        // })
                    } else {
                        // 新增
                        // addNurse(this.nurseForm).then(() => {
                        //   this.$message.success('新增成功')
                        //   this.submitLoading = false
                        //   this.dialogVisible = false
                        //   this.loadData()
                        // }).catch(() => {
                        //   this.submitLoading = false
                        //   this.$message.error('新增失败')
                        // })
                    }
                }
            })
        },
        // 处理状态变化
        async handleStatusChange(row) {
            try {
                const action = row.status === '1' ? '启用' : '停用'
                await this.$confirm(`确定要${action}该问卷吗？`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })

                // 调用相应的API
                if (row.status === '1') {
                    // await enableNurseTag(row.id)
                    this.$message.success('启用成功')
                } else {
                    // await disableNurseTag(row.id)
                    this.$message.success('停用成功')
                }

                // 重新加载数据以更新使用次数等信息
                this.loadData()
            } catch (error) {
                if (error !== 'cancel') {
                    // 如果操作失败，恢复原来的状态
                    row.status = row.status === '1' ? '0' : '1'
                    this.$message.error('操作失败')
                    console.error(error)
                } else {
                    // 用户取消操作，恢复原来的状态
                    row.status = row.status === '1' ? '0' : '1'
                }
            }
        },

        // 关闭对话框
        handleDialogClose() {
            this.dialogVisible = false
            this.$refs.nurseForm.resetFields()
        },
        // 分页大小改变
        handleSizeChange(val) {
            this.pagination.pageSize = val
            this.loadData()
        },
        // 当前页改变
        handleCurrentChange(val) {
            this.pagination.currentPage = val
            this.loadData()
        },
        // 加载护士问卷
        loadNurseTags() {
            // getNurseTags().then(res => {
            //   if (res && res.length > 0) {
            //     this.nurseTagOptions = res.map(tag => ({
            //       label: tag.name || tag.label,
            //       value: tag.value || tag.name || tag.label
            //     }))
            //   }
            // }).catch(() => {
            //   // 如果API调用失败，使用默认问卷
            //   console.log('使用默认护士问卷')
            // })
        },
        // 加载数据
        loadData() {
            // this.loading = true
            // const params = {
            //   page: this.pagination.currentPage - 1,
            //   size: this.pagination.pageSize,
            //   name: this.searchForm.name,
            //   employeeId: this.searchForm.employeeId,
            //   phone: this.searchForm.phone,
            //   tag: this.searchForm.tag,
            //   boundUser: this.searchForm.boundUser
            // }
            // getNurseList(params).then(res => {
            //   this.tableData = res.content || res
            //   this.pagination.total = res.totalElements || res.length || 0
            //   this.loading = false
            // }).catch(() => {
            //   this.loading = false
            //   this.$message.error('获取护士列表失败')
            // })
        }
    },
    mounted() {
        this.loadNurseTags()
        this.loadData()
    }
}
</script>

<style lang="scss" scoped>
.app-container {
    padding: 20px;

    .search-container {
        background: #fff;
        padding: 20px;
        margin-bottom: 20px;
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

        .search-form {
            .el-form-item {
                margin-bottom: 15px;
                margin-right: 20px;
            }
        }
    }

    .operation-container {
        margin-bottom: 20px;
        text-align: right;
    }

    .operation-text {
        font-size: 14px;
    }

    .pagination-container {
        text-align: right;
        margin-top: 20px;
    }

    .el-table {
        .el-button--text {
            padding: 0;
            margin: 0 5px;
        }
    }

    .dialog-footer {
        text-align: right;
    }
}
</style>
